//
// Mode Switcher
//

#elementor-mode-switcher {
	--e-a-mode-switcher-width: 15px;
	--e-a-mode-switcher-height: 50px;
	--e-a-mode-switcher-icon-size: 15px;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 100%;
	transform: translateY(-50%);
	background-color: var(--e-a-bg-default);
        box-shadow: calc(3px * var(--direction-multiplier, 1)) 1px 3px rgba(0, 0, 0, 0.05);
	transition: .3s opacity;

	&:hover {
		background-color: var(--e-a-bg-hover);
	}

	&:focus-within {
		background-color: var(--e-a-bg-active);
	}

	.e-panel-block-interactions & {
		opacity: 0;
		pointer-events: none;
	}

	&-preview {
		i {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: var(--e-a-mode-switcher-width);
			height: var(--e-a-mode-switcher-height);
			font-size: var(--e-a-mode-switcher-icon-size);
			cursor: pointer;
		}

		&-input {
			display: none;
		}
	}
}